<template>
    <div class="login-wrapper">
        <IHeader class="header" :back="true"></IHeader>
        <div class="logo-wrapper">
            <image class="logo" :src="imgPath('logo.png')"></image>
        </div>
        <div class="flex_row form-outer">
            <div class="form-wrapper">
                <div class="write-wrapper flex_row space_between">
                    <image class="icon" :src="imgPath('phone.png')"></image>
                    <div class="border-bottom country">
                        <input class="write country-code" type="text" value="+86">
                    </div>
                    <div class="border-bottom" style="width: 304px;">
                        <input class="write" autofocus="true" type="tel" maxlength="11" v-model="telphone" placeholder="请输入手机号码" @blur="checkTelphone">
                    </div>
                </div>
                <div class="write-wrapper flex_row space_between password-wrapper">
                    <image class="icon" :src="imgPath('/password.png')"></image>
                    <div class="border-bottom password">
                        <input class="write" ref="password" v-model="password" minlength="6" maxlength="16" @blur="checkPassword" :type="passwordType" placeholder="请输入密码">
                        <image class="eye" :src="imgPath(eyeSrc)" @click="changePassword"></image>
                    </div>
                </div>
                <Tip v-if="tipObj.show" :word="tipObj.msg"></Tip>
                <text @touchstart="tStart" @touchend="tEnd" class="submitBtn" :class="[ifPress ? 'afterPress' : 'beforePress']" @click="handleLogin">登&nbsp;录</text>
                <div class="forget-wrapper">
                    <text class="col_fecb01 fs_24" @click="forgetPassword">忘记密码？</text>
                    <div class="register-wrapper" @click="toRegister">
                        <text class="fs_24 col_aab0b4">没有账号？</text>
                        <text class="register col_fecb01 fs_24">注册</text>
                    </div>
                </div>
            </div>
        </div>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import { WxcLoading, WxcDialog } from 'weex-ui'
import IHeader from '@/components/header'
import Tip from '@/components/tip'
import { isvalidatemobile } from '@/util/validate'
import { userLogin } from '@/api/user'
const storage = weex.requireModule('storage')
// const modal = weex.requireModule('modal')

export default {
  name: 'login',
  data () {
    return {
      show: true,
      telphone: '', // 手机号
      password: '', // 用户输入密码
      passwordType: 'password', // 密码显示类型
      showPassword: false, // 密码是否可见
      eyeSrc: 'eye_hide.png', // 眼睛路径
      btnSrc: 'login.png', // 登录按钮路径
      ifPress: false, // 是否点击
      needMask: true,
      loadingShow: false, // loading显示
      tipObj: { // 提示信息
        show: false,
        msg: ''
      }
    }
  },
  created () {
    const that = this
    storage.getItem('userId', event => {
      if (event.result === 'success') {
        that.$router.push('/mine/personalCenter')
      }
    })
  },
  methods: {
    tStart () {
      this.ifPress = true
    },
    tEnd () {
      this.ifPress = false
    },
    toRegister () { // 跳转注册
      this.$router.push('register')
    },
    changePassword () { // 眼睛点击事件 改变input的type
      if (this.showPassword) {
        this.passwordType = 'password'
        this.eyeSrc = 'eye_hide.png'
      } else {
        this.passwordType = 'text'
        this.eyeSrc = 'eye_show.png'
      }
      this.showPassword = !this.showPassword
    },
    forgetPassword () { // 忘记密码
      this.$router.push('/account/modifyPassword')
    },
    checkTelphone () { // 验证手机号
      const that = this
      let tel = that.telphone
      let res = isvalidatemobile(tel)
      if (!res.result) {
        that.tipObj.show = true
        that.tipObj.msg = res.msg
        return
      }
      that.tipObj.show = false
    },
    checkPassword () { // 验证密码
      const that = this
      if (that.tipObj.show) {
        return
      }
      let word = that.password
      if (word.length <= 0) {
        that.tipObj.msg = '密码不能为空'
        that.tipObj.show = true
      }
    },
    handleLogin () { // 用户登录
      const that = this
      that.checkTelphone()
      that.checkPassword()
      if (that.tipObj.show) {
        return
      }
      let params = {
        account: that.telphone,
        password: that.password
      }
      that.loadingShow = true
      that.$api.post(userLogin, params, function (res) {
        storage.setItem('userId', res.data.userId, (event) => {
          if (event.result === 'success') {
            let obj = {
              success: true,
              word: '登录成功'
            }
            that.$router.push({path: '/home', query: {obj: obj}})
          }
          that.loadingShow = false
        })
      }, () => {
        that.loadingShow = false
      })
    }
  },
  components: {
    WxcLoading,
    WxcDialog,
    IHeader,
    Tip
  }
}
</script>

<style scoped>
    .header {
        background-image: none;
    }
    .flex_row {
        flex-direction: row;
    }
    .space_between {
        justify-content: space-between;
    }
    .col_fecb01 {
        color: #fecb01;
    }
    .col_aab0b4 {
        color: #aab0be;
    }
    .login-wrapper {
        background-image: linear-gradient(to bottom right, #2b3040, #7d88a4);
    }
    .logo-wrapper {
        margin-top: 160px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .logo {
        width: 350px;
        height: 246px;
    }
    .form-outer {
        margin-top: 170px;
        justify-content: center;
    }
    .form-wrapper {
        width: 442px;
    }
    .country {
        width: 64px;
        margin-right: 16px;
    }
    .country-code {
        color: #fff;
        font-family: medium;
    }
    .icon {
        width: 42px;
        height: 42px;
        margin-top: 5px;
        margin-right: 16px;
    }
    .password-wrapper {
        margin-top: 32px;
        margin-bottom: 56px;
    }
    .password {
        flex: 1;
        position: relative;
        padding-right: 42px;
    }
    .eye {
        position: absolute;
        right: 0;
        top: 6px;
        width: 40px;
        height: 40px;
    }
    .border-bottom {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #7d88a4;
    }
    .write {
        flex: 1;
        height: 52px;
        color: #b9c0d4;
        font-size: 30px;
        line-height: 52px;
        font-family: regular;
        background-color: transparent;
        placeholder-color: #7d88a4;
    }
    .submitBtn {
        height: 70px;
        margin-top: 56px;
        line-height: 70px;
        text-align: center;
        font-size: 30px;
        color: #fff;
        border-radius: 35px;
    }
    .beforePress {
        color: #fff;
        background-color: #7d88a4;
    }
    .afterPress {
        color: #c4c4c4;
        background-color: #5f687f;
    }
    .forget-wrapper {
        margin-top: 16px;
        justify-content: space-between;
        flex-direction: row;
    }
    .register-wrapper {
        flex-direction: row;
    }
    .fs_24 {
        font-size: 24px;
    }
</style>
